<template>
  <div>
    <el-card>
      <el-button @click="showAdd">添加模板</el-button>
      <el-button type="success" @click="showCopy" v-if="copyName == 1"
        >复制模板</el-button
      >
      <el-button type="success" @click="showCreate" v-if="copyName == 2"
        >创建模板</el-button
      >
      <el-table
        :data="templateList"
        border
        style="width: 100%;margin-top:20px;"
      >
        <el-table-column
          prop="companyname"
          label="所属公司名"
        ></el-table-column>
        <el-table-column prop="name" label="模板名"></el-table-column>
        <el-table-column prop="thecount" label="温控参数数量"></el-table-column>
        <el-table-column prop="add_time" label="添加时间"></el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="showEdit(scope.row.id, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="handlerDel(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="warning"
              size="small"
              @click="handlerShow(scope.row.id, scope.row.companyId)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 模板弹框 -->
      <el-dialog
        :title="temName"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleFormRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="模板名" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入模板名"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerSure">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 复制模板 -->
      <el-dialog
        title="复制模板"
        :visible.sync="dialogVisibleCopy"
        width="30%"
        :before-close="handleCloseCopy"
      >
        <el-form
          :model="copyForm"
          :rules="copyrules"
          ref="copyRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="	模板名" prop="name">
            <el-input
              v-model="copyForm.name"
              placeholder="请输入模板名"
            ></el-input>
          </el-form-item>
          <el-form-item label="复制的模板" prop="theFormId">
            <el-select
              v-model="copyForm.theFormId"
              placeholder="请选择复制的模板"
            >
              <el-option
                v-for="item in copyList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleCopy = false">取 消</el-button>
          <el-button type="primary" @click="handlerCopy">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getTheFromworkList,
  insertTheFromwork,
  updateTheFromwork,
  deleteTheFromwork,
  getFormworkSelect,
  copyTheFromwork,
  getIsCopy,
  createFormwork
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  inject: ["reload"],
  data() {
    return {
      // 模板列表的数据
      templateList: [],
      //   弹框数据
      ruleForm: {
        name: "",
        companyId: ""
      },
      //   弹框的校验
      rules: {
        name: [{ required: true, message: "请输入模板名", trigger: "blur" }]
      },
      //  弹框的显示隐藏
      dialogVisible: false,
      //   弹框的名字
      temName: "添加模板",
      //  列表的分页
      temQuery: {
        pageNumber: 1,
        pageSize: 10,
        companyId: ""
      },
      //   总条数
      count: 0,
      //   模板信息列表
      copyList: [],
      //   复制模板的弹框
      dialogVisibleCopy: false,
      //   复制的弹框
      copyForm: {
        name: "",
        theFormId: "",
        companyId: ""
      },
      //   复制的弹框的校验
      copyrules: {
        name: [{ required: true, message: "请输入模板名", trigger: "change" }],
        theFormId: [
          { required: true, message: "请选择复制的模板", trigger: "change" }
        ]
      },
      copyName: ""
    };
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.getIsCopyTemplate();
      this.getTemplate();
    }
  },
  created() {
    this.getDataInit();
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getIsCopyTemplate();
        this.getTemplate();
      }
    },
    // 判断是否有复制的模板
    getIsCopyTemplate() {
      this.postRequest(getIsCopy, { companyId: this.org_id }).then(res => {
        this.copyName = res.data;
      });
    },
    //   获取模板信息(供复制使用)
    getCopy() {
      this.postRequest(getFormworkSelect, { companyId: this.org_id }).then(
        res => {
          if (res.code == 200) {
            this.copyList = res.data;
          }
        }
      );
    },
    //   点击复制模板
    showCopy() {
      this.dialogVisibleCopy = !this.dialogVisibleCopy;
      this.getCopy();
    },
    // 点击确定复制模板
    handlerCopy() {
      this.$refs.copyRef.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        this.copyForm.companyId = this.org_id;
        this.postRequest(copyTheFromwork, this.copyForm).then(res => {
          if (res.code == 200) {
            this.$message.success("复制模板成功");
            this.dialogVisibleCopy = false;
            this.getTemplate();
            this.$refs.copyRef.resetFields();
          }
        });
      });
    },
    // 点击复制弹框 空白处
    handleCloseCopy() {
      this.dialogVisibleCopy = false;
      this.$refs.copyRef.resetFields();
    },
    //   获取模板列表
    getTemplate() {
      this.temQuery.companyId = this.org_id;
      this.postRequest(getTheFromworkList, this.temQuery).then(res => {
        if (res.code == 200) {
          this.templateList = res.data.list;
          this.count = res.data.count;
        }
      });
    },
    //点击查看跳转到参数列表
    gocanList() {
      this.$router.push("/ThermostatList");
    },
    // 点击添加弹框
    showAdd() {
      this.temName = "添加模板";
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击编辑显示 弹框
    showEdit(id, data) {
      this.$nextTick(() => {
        this.temName = "编辑模板";
        this.dialogVisible = !this.dialogVisible;
        this.ruleForm.theFormId = data.id;
        this.ruleForm.name = data.name;
      });
    },
    // 封装一个添加模板的方法
    handlerAdd() {
      this.ruleForm.companyId = this.org_id;
      this.postRequest(insertTheFromwork, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加模板成功");
          this.getTemplate();
          this.dialogVisible = false;
          this.$refs.ruleFormRef.resetFields();
        }
      });
    },
    // 封装一个编辑模板的方法
    handlerEdit() {
      this.postRequest(updateTheFromwork, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("更新模板成功");
          this.getTemplate();
          this.dialogVisible = false;
          this.$refs.ruleFormRef.resetFields();
        }
      });
    },
    // 点击确定判断是添加还是编辑
    handlerSure() {
      this.$refs.ruleFormRef.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.temName == "添加模板") {
          this.handlerAdd();
        } else if (this.temName == "编辑模板") {
          this.handlerEdit();
        }
      });
    },
    // 点击删除
    handlerDel(id) {
      const params = {
        theFormId: id
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(deleteTheFromwork, params).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getTemplate();
            this.getIsCopyTemplate();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 点击空白取消弹框
    handleClose() {
      this.dialogVisible = !this.dialogVisible;
      //   this.$refs.ruleFormRef.resetFields();
      this.ruleForm.theFormId = "";
      this.ruleForm.name = "";
    },
    // 点击查看
    handlerShow(id, companyId) {
      window.sessionStorage.setItem("formworkid", id);
      window.sessionStorage.setItem("companyId", companyId);
      this.$router.push("/ThermostatList");
    },
    // 创建模板
    showCreate() {
      this.$confirm("您是否创建模板?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(createFormwork, { companyId: this.org_id }).then(
            res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "创建成功!"
                });
                this.getTemplate();
                // this.reload()
                this.getIsCopyTemplate();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消创建"
          });
        });
    }
  }
};
</script>

<style></style>
